<template>

  <div class="layui-layout layui-layout-admin">
    <div class="adminnav1">
      <Pagetop></Pagetop>
    </div>
    <div class="adminnav2">
      <Secondnav urlname="homepage"></Secondnav>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body kedou-admin" id="LAY_app_body app">
      <div class="layadmin-tabsbody-item layui-show">
        <div class="pagelist">
          <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title">
              <legend>角色管理</legend>
            </fieldset>
          </div>

          <div class="layui-card-body">
            <div class="buttop">
              <button type="button" class="layui-btn  layui-btn-normal" @click="addData">添加角色</button>
            </div>

          </div>

          <div class="layui-tab-content" style="padding:50px 0">
            <div class="layui-tab-item layui-show">
              <div class="layui-card-body">
                <table class="layui-table">
                  <thead>
                    <tr>
                      <th style="text-align:center;">角色名称</th>
                      <th style="text-align:center;">角色描述</th>
                      <th style="text-align:center;">操作</th>
                    </tr>
                  </thead>
                  <tbody style="text-align:center;">
                    <tr>
                      <td>财务</td>
                      <td>财务</td>
                      <td>
                        <button class="layui-btn layui-btn-primary">编辑</button>
                        <button class="layui-btn layui-btn-primary">删除</button>
                      </td>
                    </tr>
                    <tr>
                      <td>产品管理</td>
                      <td>产品添加</td>
                      <td>
                        <button class="layui-btn layui-btn-primary">编辑</button>
                        <button class="layui-btn layui-btn-primary">删除</button>
                      </td>
                    </tr>
                    <tr>
                      <td>订单操作</td>
                      <td>订单发货</td>
                      <td>
                        <button class="layui-btn layui-btn-primary">编辑</button>
                        <button class="layui-btn layui-btn-primary">删除</button>
                      </td>
                    </tr>
                    <tr>
                      <td>代理管理</td>
                      <td>代理管理</td>
                      <td>
                        <button class="layui-btn layui-btn-primary">编辑</button>
                        <button class="layui-btn layui-btn-primary">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div id="demo1"></div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Pagetop from "../common/pagetop.vue";
import Secondnav from "../common/secondnav.vue";
export default {
  name: "jsset",
  components: { Pagetop, Secondnav },
  data () {
    return {

    };
  },
  mounted () {
    layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
        , layer = layui.layer;
      laypage.render({
        elem: 'demo1'
        , count: 10 //数据总数
        , jump: function (obj) {
          console.log(obj)
        }
      });
    })
  },
  methods: {
    addData: function () {
      var _this = this;
      layer.open({
        type: 2
        , title: '添加角色'
        , content: 'http://localhost:8080/#/jssetadd'
        , area: ['50%', '70%']
      });
    },
    updated: function () {
      layui.use(["form", "table"], function () {
        var form = layui.form
          , table = layui.table;
        form.render();
      })
    }
  },
};
</script>
<style scoped>
/* .layui-form-label {
  width: 120px;
}
.layui-input-block {
  margin-left: 14%;
  padding-left: 10px;
} */

/*二级导航*/
</style>